<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container">
    <ul>
        <li>大一</li>
        <li>大二</li>
        <li>大三</li>
        <li>大四</li>
    </ul>
</div>
<script type="text/javascript">
    // 通过 document 中的方法，获取 指定的元素
    // 根据 id 获取元素
    let div = document.getElementById("container");
    console.log(div);

    // 获取所有的子节点,返回的类型是 NodeList,一个类数组对象（就是一个长得像数组的对象）
    let childNodes = div.childNodes ;
    console.log( childNodes ) ;
    //(空白是节点的一种)
    console.log( childNodes[0].nodeType ) ; // 此时是文本
    console.log( childNodes[1].nodeType ) ; // 此时是元素 1

    console.log(div.attributes);
    // 返回 NamedNodeMap 的数据，有点类似于Java中的Map，也是键值对的形式
    let attributes = div.attributes ;
    //通过循环进行遍历
    for (let i = 0; i < attributes.length; i++) {
        console.log( attributes[i].name  ) ;
        console.log( attributes[i].value  ) ;

        console.log( attributes[i].nodeType ) ; // 2
    }
</script>
</body>
</html>